<!doctype html>
<html lang="en" xmlns:v-on="http://www.w3.org/1999/xhtml" xmlns:v-bind="http://www.w3.org/1999/xhtml">
<head>
    <meta charset="UTF-8">
    <title>方法与事件处理器select</title>
</head>
<body>
    <div id="example-3">
        <select name="sports" id="sports" v-model="sports">
            <option selected>basketBall</option>
            <option>footBall</option>
            <option>volleyball</option>
            <option>rugby</option>
        </select>
        <p>selected:{{sports}}</p>

        <select name="stars" id="stars" v-model="stars" multiple>
            <option selected>jordan</option>
            <option>james</option>
            <option>kobe</option>
            <option>keven</option>
        </select>
        <p>selected:{{stars | json}}</p>

        <select name="games" id="games" v-model="games.st">
            <option v-for="item in games.items" v-bind:value="item.value">
                {{item.text}}
            </option>
        </select>
        <p>{{games.st}}</p>
    </div>

<script src="../lib/vue.js"></script>
<script>
    var exampleVm = new Vue({
        el : "#example-3",
        data : {
            sports : [],
            stars : [],
            games : {
                st : 1,
                items : [
                    {text : "WOW", value : 1},
                    {text : "LOL", value : 2},
                    {text : "DOTA", value : 3},
                    {text : "CF", value : 4}
                ]
            }
        }
    })
</script>
</body>
</html>